<template>
	<view class="content">
		<view class="likesBox">
			<view class="likesList" v-if="likesList&&likesList.length>0">
				<scroll-view show-scrollbar="false" scroll-y="true" :scroll-top="scrollLeftTop"
					scroll-with-animation="true">
					<view class="likesItem" :id="'listItem'+(index+1)" v-for="(item,index) in likesList" :key="item.id"
						@click="goDetail(item.bizId,item.isDel)">
						<view class="left">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="right">
							<view class="topBox">
								<view class="nameAndTime">
									<view class="name">
										{{item.username}}
									</view>
									<view class="time">
										{{item.createTime}} 发布
									</view>
								</view>
								<view class="rightAndRight">
									<view v-if="!item.isMyself && item.isLogoff!=1"
										:class="['follow',item.isFavorite==1?'following':'']"
										@click.stop="changeFollowStatus(item,index)">
										{{item.isFavorite==1?'已关注':'关注'}}
									</view>
									<view class="operate" v-if="item.isDel!=1">
										<image src="../../static/minePost/more.png" mode=""
											@click.stop="openOperate(item)"></image>
									</view>
								</view>
							</view>
							<!-- <view class="contentTxt">
							{{item.text}}
						</view> -->
							<view :class="['contentBox',item.isShow === false?'notShow':'']" v-if="item.isDel != 1">
								<!-- <view class="text"> -->
								{{item.text}}

								<view v-if="item.text.length>80" :class="['more',item.isShow=== true?'Showing':'']"
									@click.stop="changeShow(item,index)">
									{{item.isShow=== true?'收起':'展开'}}
								</view>
							</view>
							<view class="imgAndVid" v-if="item.isDel != 1">
								<!-- viewImgs(item.video,'video') -->
								<view class="vidsItem" v-show="item.video" @click.stop="viewImgs(item.video,'video')">
									<image class="bg" :src="item.videoCover" mode="aspectFill">
									</image>
									<view class="mark">
										
									</view>
									<image class="play" src="../../static/minePost/play.png" mode=""></image>
								</view>
								<view class="imgs" v-if="item.photos&&item.photos.length>0">

									<view class="imgsItem" v-for="(item1,index1) in item.showPhotos" :key="index1">
										<image :src="item1" mode="aspectFill"
											@click.stop="onShowImg(item.photos,index1)">
										</image>
										<view class="more_wrap" v-if="item.photos.length>2 && index1==1">
											<image src="@/static/square/more.png" mode="widthFix" class="more"></image>
											<view class="img_num">
												+{{item.photos.length-2}}
											</view>
										</view>
									</view>

								</view>
							</view>
							<!-- <view class="videos" v-if="item.video&&item.video.length>0">
							<view class="imgsItem" v-for="(item1,index1) in item.video" :key="index1">
								<video :src="item1"></video>
							</view>
						</view> -->
							<!-- <view class="video_wrap" v-if="item.video">

							<ls-dom-video ref="domVideo" class="video-item" object-fit="contain" :controls="true"
								:show-progress="false" :show-fullscreen-btn="false" :show-play-btn="false"
								:show-bottom-progress="false" :autoplay="false" :src="item.video"></ls-dom-video>
						</view> -->
							<view class="deleted" v-if="item.isDel == 1">
								该贴已被删除
							</view>
							<view class="likesAndComm">
								<view class="likes">
									<image
										:src="`../../static/postDetail/${item.isFavor==1?'favorited':'favorite'}.png`"
										mode="" @click.stop="onLikeOrDisLike(item.isFavor,item.bizId,index)"></image>
									{{item.favoriteNum || 0}}
								</view>
								<view class="comm">
									<image src="../../static/postDetail/comm.png" mode=""></image>
									{{item.commentNum || 0}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="nullData" v-else>
				<image src="../../static/follow/follow1.png" mode="widthFix"></image>
				<view class="txt">
					还没有点赞过呢，赶快行动起来~
				</view>
			</view>
		</view>
		<u-overlay :show="modalShow" @click="modalShow = false">
			<view class="warp-lay">
				<!-- <view class="rect" @tap.stop></view> -->
				<view class="followConfirm">
					<view class="txt">
						确定不再关注Ta了吗
					</view>
					<view class="btnGroup">
						<view class="btn cancel" @click="modalShow = false">
							继续关注
						</view>
						<view class="btn confirm" @click="onCancelFollow">
							不关注
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="delModalShow" @click="delModalShow = false">
			<view class="warp-lay">
				<!-- <view class="rect" @tap.stop></view> -->
				<view class="followConfirm">
					<view class="txt">
						确认删除帖子吗?
					</view>
					<view class="btnGroup">
						<view class="btn cancel" @click="delModalShow = false">
							取消
						</view>
						<view class="btn confirm" @click="deletePost">
							确认
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<uni-popup ref="popup" type="bottom" border-radius="30rpx 30rpx 0 0" background-color="#fff">

			<view class="delete" v-show="isMyself" @click="openOverlay">
				删除
			</view>
			<view class="delete" v-show="!isMyself" @click="onReport">
				举报
			</view>
			<view class="cancel" @click="closeModal">
				取消
			</view>
		</uni-popup>
		<imageViewer ref="imageViewerRef" :lists="iVlists" :types="viewType" :show.sync="viewShow"></imageViewer>
	</view>
</template>

<script>
	import imageViewer from '@/components/imagesViewer/imagesViewer.vue'
	import {
		getMineLikes
	} from "@/api/likes.js";
	import {
		addLike,
	} from "@/api/apis.js"
	import {
		addCustomerFans,
		deleteFavorite
	} from "@/api/follow.js";
	import {
		delPost,
	} from "@/api/post.js";
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		components: {
			imageViewer,
		},
		data() {
			return {
				ownId: '',
				likesList: [],
				// viewImg: '',
				viewShow: false,
				viewType: '',
				iVlists: [],
				modalShow: false,
				delModalShow: false,
				nowFollowId: '',
				operateId: '',
				isMyself: false,
				scrollLeftTop: 0,
				realTop: 0,
			};
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
		},
		methods: {
			// 展开记录位置，收起滚动回去
			changeShow(item, index) {
				item.isShow = !item.isShow
				console.log(index, 'i')
				let that = this
				const query = uni.createSelectorQuery().in(this);
				if (item.isShow) {
					query.select(`#listItem${index+1}`).boundingClientRect(data => {
						if (data) {
							// data.top就是元素距离顶部的高度
							console.log('元素距离顶部的高度:', data.top);
							that.realTop = data.top
						}
					}).exec();
				} else {
					query.select(`#listItem${index+1}`).boundingClientRect(data => {
						if (data) {
							that.scrollLeftTop = that.realTop
							// console.log(that.scrollLeftTop,'that.scrollLeftTop')
						}
					}).exec();
				}
			},
			deletePost() {
				delPost({
					id: this.operateId
				}).then(res => {
					if (res.success) {
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
						this.getLikeList()
						this.$refs.popup.close()
					}
				})
			},
			openOperate(item) {
				this.operateId = item.bizId
				if (item.customerId == this.ownId) {
					this.isMyself = true
				} else {
					this.isMyself = false
				}
				this.$refs.popup.open()
			},
			openOverlay() {
				this.delModalShow = true
			},
			// 取消
			closeModal() {
				this.$refs.popup.close()
			},
			// 举报
			onReport() {
				this.closeModal()
				uni.navigateTo({
					url: `/pages/userReport/userReport?id=${this.operateId}&Type=0`
				})
			},
			onCancelFollow() {
				console.log(this.nowFollowId, 'this.nowFollowId')
				// return
				deleteFavorite({
					followerId: this.nowFollowId
				}).then((res) => {
					console.log(res);
					if (res.success) {
						console.log(res);
						this.getLikeList()
						this.modalShow = false
						uni.showToast({
							title: '取消关注成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					} else {
						uni.showToast({
							title: '取消关注失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}
				});
			},
			addFollow(id) {
				addCustomerFans({
					followerId: id
				}).then((res) => {
					console.log(res);
					if (res.success) {
						console.log(res);
						this.getLikeList()
						uni.showToast({
							title: '关注成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					} else {
						uni.showToast({
							title: '关注失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}
				});
			},
			changeFollowStatus(item, index) {
				console.log(item.isFavorite, 'status')
				if (item.isFavorite == 1) {
					this.modalShow = true
					this.nowFollowId = item.customerId
				} else {
					// 关注
					this.addFollow(item.customerId, index)
				}
			},
			goDetail(id, state) {
				// console.log(id,'ididid')
				// return
				if (state != 1) {
					uni.navigateTo({
						url: `/pages/postDetail/postDetail?id=${id}`
					})
				} else {
					uni.showToast({
						title: '该贴已被删除',
						icon: 'none',
						duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
						mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
						// image:'./image.png',//自定义图标的本地路径
					});
				}
			},
			onLikeOrDisLike(state, id, index) {
				let params = {
					bizId: id,
					bizType: '0',
					liked: state == 0 || state == null ? true : false
				}

				console.log(params, 'paramsparams')
				addLike(params).then(res => {
					console.log(res);
					if (res.success) {
						// this.getDetail()
						if (state == 0) {
							this.likesList[index].isFavor = 1
							this.likesList[index].favoriteNum += 1

						} else {
							this.likesList[index].isFavor = 0
							this.likesList[index].favoriteNum -= 1
						}
					}
				})
			},
			// 预览图图片
			onShowImg(item, index) {
				uni.previewImage({
					current: index,
					urls: item,
				})
			},
			// 废案
			viewImgs(list, type) {
				if (type == 'video') {
					list = [{
						url: list,
						poster: `${list}?x-oss-process=video/snapshot,t_1,f_jpg`
					}]
				}
				if (type == 'image') {
					let arr = []
					list.map(item => {
						arr.push({
							url: item
						})
					})
					list = JSON.parse(JSON.stringify(arr))
				}
				// console.log(list, 'list');
				// return
				this.iVlists = list
				this.viewType = type
				this.viewShow = true
			},
			getLikeList() {
				getMineLikes().then(res => {
					if (res.success) {
						console.log(res)
						res.result.map(item => {
							item.isShow = false
							item.isFavor = 1
							if (item.picture) {
								item.photos = JSON.parse(item.picture)
								// console.log(item.photos, 'item.photos')
								item.showPhotos = item.photos.slice(0, 2)
							}
							// item.videoList=[]
							if (item.video) {
								item.videoCover = `${item.video}?x-oss-process=video/snapshot,t_1,f_jpg`
								console.log(item.videoCover, 'res.result.videoCover')
								// item.videoList.push(item.video)
							}
							if (item.customerId != this.ownId) {
								item.isMyself = false
							} else {
								item.isMyself = true
							}
						})
						this.likesList = res.result
						console.log(this.likesList, 'this.likesList')
					}
				})
			},
		},
		mounted() {
			this.ownId = this.Info.id
			// this.getLikeList()
		},
		onShow() {
			this.getLikeList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.likesBox {
			.likesList {
				.likesItem {
					padding: 30rpx;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;

					.left {
						// .avatar{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
							display: block;
						}

						// }
					}

					.right {
						width: calc(100% - 95rpx);

						.topBox {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 29rpx;

							.nameAndTime {
								.name {
									// font-size: 30rpx;
									color: #5C5C5C;
								}

								.time {
									// font-size: 30rpx;
									color: #858585;
								}
							}

							.rightAndRight {
								display: flex;
								align-items: center;
								justify-content: flex-end;

								.follow {
									font-size: 28rpx;
									padding: 5rpx 25rpx;
									border-radius: 30rpx;
									border: 1px solid $uni-text-color-red;
									color: $uni-text-color-red;
									margin-right: 20rpx;
								}

								.following {
									border: 1px solid #7c7c7c;
									color: #7c7c7c;
								}

								.operate {
									width: 25rpx;
									height: 25rpx;

									image {
										width: 100%;
										height: 100%;
										display: block;

									}
								}
							}
						}

						.contentTxt {
							margin: 25rpx 0 35rpx 0;
							letter-spacing: 2rpx;
							line-height: 45rpx;
						}

						.contentBox {
							// .txt{}
							margin: 25rpx 0 35rpx 0;
							position: relative;
							font-size: 32rpx;
							letter-spacing: 2rpx;
							line-height: 45rpx;
							// word-break: break-all;
							word-break: break-word;



							// // 视频
							// .video_wrap {
							// 	margin: 24rpx 0;
							// 	text-align: center;

							// 	.video-item {
							// 		z-index: 1;
							// 	}
							// }

							.more {
								// display: inline-block;
								position: absolute;
								bottom: 0;
								right: 0;
								background-color: #fff;
								color: #4B7DFF;

								&::before {
									position: absolute;
									right: 100%;
									content: "";
									width: 142rpx;
									height: 44rpx;
									background-image: linear-gradient(270deg, #fff, hsla(0, 0%, 100%, 0.2));
								}
							}

							.Showing {
								position: inherit;

								&::before {
									position: inherit;
									content: "";
									width: 0;
									height: 0;
									background-image: none;
								}
							}
						}

						.notShow {
							// height: 300rpx;
							// overflow: hidden;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 4;
							-webkit-box-orient: vertical;
							// word-break: break-all;
							word-break: break-word;



						}

						.imgAndVid {

							.vidsItem {
								border-radius: 10rpx;
								overflow: hidden;
								margin-bottom: 20rpx;
								margin-right: 20rpx;
								width: 260rpx;
								height: 260rpx;
								position: relative;

								.bg {
									width: 100%;
									height: 100%;
									display: block;
								}
								.mark{
									position: absolute;
									top: 0;
									bottom: 0;
									left: 0;
									right: 0;
									width: 100%;
									height: 100%;
									margin: auto;
									display: block;
									background-color: rgba(0, 0, 0, 0.2);
								}
								.play {
									position: absolute;
									top: 0;
									bottom: 0;
									left: 0;
									right: 0;
									width: 90rpx;
									height: 90rpx;
									margin: auto;
									display: block;
								}
							}

							.imgs {
								display: flex;
								align-items: center;
								justify-content: flex-start;
								flex-wrap: wrap;

								.imgsItem {
									border-radius: 10rpx;
									overflow: hidden;
									margin-bottom: 20rpx;
									margin-right: 20rpx;
									width: 260rpx;
									height: 260rpx;
									position: relative;

									image {
										width: 100%;
										height: 100%;
										display: block;
									}

									.more_wrap {
										position: absolute;
										display: flex;
										bottom: 12rpx;
										right: 12rpx;
										z-index: 1;
										width: 68rpx;
										height: 28rpx;
										background: #000000;
										border-radius: 4rpx;
										opacity: 0.6;
										padding: 4rpx 8rpx;
										justify-content: space-between;
										align-items: center;
										overflow: hidden;

										.more {
											height: 20rpx;
											width: 20rpx;
										}

										.img_num {
											color: #fff;
											font-size: 20rpx;
										}
									}
								}


							}
						}

						// .video_wrap {
						// 	margin-top: 24rpx;
						// 	text-align: center;

						// 	.video-item {
						// 		z-index: 1;
						// 	}
						// }

						.videos {}

						.deleted {
							padding: 25rpx 30rpx;
							margin: 25rpx 0 0 0;
							background-color: #F7F7F7;
						}

						.likesAndComm {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							padding-top: 20rpx;

							.likes {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								color: #BABABA;
								font-size: 28rpx;
								margin-right: 50rpx;

								image {
									width: 50rpx;
									height: 50rpx;
									display: block;
									margin-right: 10rpx;
								}
							}

							.comm {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								color: #BABABA;
								font-size: 28rpx;

								image {
									width: 50rpx;
									height: 50rpx;
									display: block;
									margin-right: 10rpx;
								}
							}
						}
					}
				}
			}

			.nullData {
				width: 100%;
				padding-top: 300rpx;

				image {
					width: 35%;
					margin: 0 auto;
					display: block;
				}

				.txt {
					text-align: center;
					color: #8C8EA0;
					font-size: 30rpx;
					margin-top: 20rpx;
				}
			}
		}

		.edit,
		.delete,
		.cancel {
			padding: 30rpx 0;
			text-align: center;
		}

		.edit {
			margin: 0 30rpx;
		}

		.delete {
			margin: 0 30rpx;
			border-bottom: 1rpx solid #D9D9D9;
			color: $uni-text-color-red;
		}

		.cancel {
			border-top: 12rpx solid #EDEDED;
		}

		.warp-lay {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.followConfirm {
				width: 70%;
				// height: 250rpx;
				padding: 45rpx 45rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;

				.txt {
					text-align: center;
					margin-bottom: 45rpx;
				}

				.btnGroup {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.btn {
						padding: 18rpx 0rpx;
						border-radius: 35rpx;
						border: 0;
						font-size: 26rpx;
						width: 46%;
						text-align: center;
					}

					.cancel {
						background-color: #EDEDED;
						color: #4D4D4D;
					}

					.confirm {
						background-image: linear-gradient(to right, #FF4C6E, #FE2C55);
						color: #fff;
					}
				}
			}
		}
	}
</style>